<template>
  <avue-crud :data="data"
							:width="1000"
              :height="400"
							ref="crudRef"
             :option="option"></avue-crud>
</template>

<script setup>
import { ref, h } from 'vue';
import { ElButton } from 'element-plus';

const crudRef = ref(null)
const data = ref(Array(100).fill().map((_, index) => {
  // 使用Array.fill创建100条数据
  const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'];
  const sexes = ['男', '女'];
  
  // 随机选择姓名和性别
  const nameIndex = Math.floor(Math.random() * names.length);
  const sexIndex = Math.floor(Math.random() * sexes.length);
  
  // 返回数据对象
  return {
    name: `${names[nameIndex]}${index + 1}号`,
    sex: sexes[sexIndex]
  };
}));

const option = ref({
  virtualize: true,
  column: [
    { label: '姓名', prop: 'name', align: 'center' },
    { label: '性别', prop: 'sex', align: 'center' },
		{
      label: '操作', prop: 'menu', align: 'center',

      cellRenderer: ({rowData}) => {
        return [h(ElButton,
          {
            type: 'primary',
            size: 'small',
            onClick: () => {
							crudRef.value.rowEdit(rowData,rowData.$index)
            }
          }, '编辑'),
					h(ElButton,
          {
            type: 'danger',
            size: 'small',
            onClick: () => {
							crudRef.value.rowDel(rowData,rowData.$index)
            }
          }, '删除')
				]
      }
    }
  ]
});
</script>
